<template>
  <img style="display:none"
       :src="ImageUrl"
       id="image">
</template>

<script>
import Viewer from 'viewerjs'
import '@/style/viewer.min.css'

export default {
  data() {
    return {
      ImageUrl: '',
      viewer: null
    }
  },
  methods: {
    async buildViewer() {
      if (this.viewer === null) {
        this.viewer = new Viewer(document.getElementById('image'), {
          viewed: function() {
            this.viewer.zoomTo(1)
          }
        })
      }
    },
    showImg(url) {
      this.ImageUrl = url
      this.buildViewer().then(() => {
        if (this.viewer) { this.viewer.update() }
        this.viewer.show()
      })
    }
  }
}
</script>
